<template>
  <div>
    <crumbs
      @goBack="
        () => {
          $router.go(-1)
        }
      "
      :superiorMenu="['销售管理']"
      currentMenu="客户管理"
      style="margin-bottom: 12px"
    />
    <a-card :bordered="false" style="height: calc(100vh - 215px)">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleShowFilter" icon="filter" style="margin-right: 10px">
          筛选 <span style="color: #1890ff; margin-left: 5px">{{ searchNum }}</span></a-button
        >
        <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
        <!-- <a-button @click="handleAdd" type="primary" style="float: right" icon="plus">新建</a-button> -->
      </div>
      <!-- 设置列 -->
      <SetColumn
        columnName="设置列"
        ref="SetColumn"
        v-if="showSetColumn"
        @sureBtn="sureBtn"
        @cancelBtn="showSetColumn = false"
      />
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange"
          :scroll="{ x: computedX, y: 'calc(100vh - 338px)' }"
        >
          <!-- 选择搜索 -->
          <template slot="selectDropdown" slot-scope="{ confirm, clearFilters, column }">
            <div class="searchWorkOreder">
              <a-select
                mode="multiple"
                placeholder="请选择"
                allowClear
                style="width: 188px"
                v-model="filterForm[selectkeys(column.dataIndex)]"
                @change="(v) => changeSelect(v, selectkeys(column.dataIndex))"
              >
                <a-select-option
                  v-for="(item, i) in selectOptions(column.dataIndex)"
                  :key="i"
                  :value="item[column.selectValue]"
                  >{{ item[column.selectText] }}</a-select-option
                >
              </a-select>
              <a-button
                type="primary"
                style="width: 80px; margin-left: 20px; display: block"
                @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
              >
                搜索
              </a-button>
            </div>
          </template>
          <a-icon
            slot="selectIcon"
            slot-scope="filtered"
            type="filter"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- title搜索条件开始 -->
          <!-- 输入框搜索 -->
          <template :slot="item.scopedSlots.filterDropdown" slot-scope="{ column }">
            <div v-for="(item, i) in filterDropdownList" :key="i" style="display: flex; padding: 8px">
              <a-input
                v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
                :placeholder="'请输入'[column.title]"
                v-model="queryParam[column.searchIndex]"
                style="width: 188px"
              />
              <a-select
                :mode="column.multi ? 'multiple' : 'default'"
                v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
                :placeholder="'请选择'[column.title]"
                allowClear
                style="width: 188px"
                v-model="queryParam[`${column.searchIndex}all`]"
                @change="(a) => changeSelect(a, column.searchIndex)"
                :labelInValue="true"
              >
                <a-select-option v-for="(items, i) in column.options" :key="i" :value="items.key">{{
                  items.label
                }}</a-select-option>
              </a-select>
              <a-range-picker
                v-if="item.scopedSlots.filterDropdown === 'datePicker'"
                style="width: 350px"
                v-model="dateForm[column.searchIndex]"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="(a, b) => onOk(a, b, column.searchIndex)"
                show-time
              />
              <j-select-user-by-dep
                v-if="item.scopedSlots.filterDropdown === 'selectPeople'"
                v-model="queryParam[`${column.searchIndex}username`]"
                :multi="column.multi"
                @changeRow="(a, b, c) => onChangeUser(b || {}, column.searchIndex)"
              ></j-select-user-by-dep>
              <a-button
                v-if="item.scopedSlots.filterDropdown !== 'tooltip'"
                type="primary"
                style="width: 80px; margin-left: 20px"
                @click="searchQuery"
              >
                搜索
              </a-button>
              <span v-if="item.scopedSlots.filterDropdown == 'tooltip'"
                >当前库存：只统计合格品数量，不包含次品，并按此物品的基本单位展示</span
              >
            </div>
          </template>
          <a-icon slot="searchIcon" type="search" />
          <a-tooltip placement="top" slot="tooltipIcon">
            <template slot="title">
              <span>当前库存：只统计合格品数量，不包含次品，并按此物品的基本单位展示</span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
          <!-- title搜索条件结束 -->
          <span slot="typeText" slot-scope="text, record">
            <a-input
              :placeholder="'请输入'"
              :defaultValue="text"
              v-model="tableData[record.id]"
              @change="changeValue"
              style="width: 150px"
            />
          </span>
        </a-table>
      </div>
      <!-- table区域-end -->
      <!-- 底部分页 -->
      <div
        :style="{
          position: 'fixed',
          bottom: 0,
          right: 0,
          zIndex: 2,
          width: '100%',
          background: '#fff',
          padding: '24px',
        }"
      >
        <div style="display: inline-block; float: right">
          <a-pagination
            :total="ipagination.total"
            v-model="ipagination.current"
            :page-size-options="ipagination.pageSizeOptions"
            :page-size="ipagination.pageSize"
            @change="onChangePage"
            @showSizeChange="onChangePage"
            show-quick-jumper
            show-size-changer
          />
        </div>
      </div>
      <!-- 选择表格条数 -->
      <div class="tableSelect" v-if="this.dataSource.length > 0">
        <a-checkbox
          :checked="selectedRowKeys.length === this.dataSource.length ? true : false"
          @change="selectAll"
        ></a-checkbox>
        <span style="margin: 0 20px">{{ `已选 ${selectedRowKeys.length}/${this.dataSource.length} 项` }}</span>
        <a style="margin-right: 20px" @click="onClearSelected">清空</a>
        <a
          style="margin-right: 20px"
          @click="submitPlan(selectedRowKeys && selectedRowKeys.length > 0 ? selectedRowKeys.toString() : null)"
          >提交采购任务</a
        >
      </div>
      <!-- 侧边筛选 -->
      <a-drawer
        width="500"
        height="100vh"
        :bodyStyle="{ background: '#f5f5f5', padding: '0' }"
        :closable="true"
        :visible="showFilter"
        @close="showFilter = false"
      >
        <formSearch ref="dataSearch" @searchDate="searchDate" />
      </a-drawer>
    </a-card>
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { tableMixin } from '@/mixins/tableMixin'
import { columns, allColumn } from './column.js'
const actionArr = []
export default {
  mixins: [tableMixin],
  components: {},
  data() {
    return {
      // 表头
      columns: columns.map((e) => {
        e.align = 'center'
        return e
      }),
      actionArr,
      allColumn: allColumn.map((e) => {
        e.align = 'center'
        return e
      }),
      url: {
        list: '/wms/goods/list',
      },
      tableData: {},
    }
  },
  computed: {},
  methods: {
    handleAdd() {
      this.$openWay(this, true, '/procurementManagement/purchaseForm')
    },
    changeValue(v) {
      console.log(v, this.tableData)
    },
    submitPlan(e) {
      let that = this
      if (!e) {
        return that.$antdMessage.warning('请选择采购物料')
      } else {
        that.$antdConfirm({
          title: '确定提交该采购任务?',
          content: '若选中多个，每个物料都将生成一个采购任务',
          onOk() {
            console.log(e, '111123')
          },
          onCancel() {},
        })
      }
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
